<template>
  <div id="choice-question">
    <div class="box"
         v-for="(item,index) in questionData">
      <Form class="title"
            :label-width="80">
        <FormItem :label="'题目'+(index+1)">
          <Input v-model="item.title"
                 clearable
                 placeholder="题目名称"></Input>
        </FormItem>
        <FormItem>
          <Button type="error"
                  @click="del(index)">删除</Button>
        </FormItem>
      </Form>
      <Form v-if="questionNum!='3'"
            class="clearfix options"
            :label-width="80">
        <FormItem label="A">
          <Input v-model="item.a"
                 clearable></Input>
        </FormItem>
        <FormItem label="B">
          <Input v-model="item.b"
                 clearable></Input>
        </FormItem>
        <FormItem label="C">
          <Input v-model="item.c"
                 clearable></Input>
        </FormItem>
        <FormItem label="D">
          <Input v-model="item.d"
                 clearable></Input>
        </FormItem>
        <FormItem label="E"
                  v-if="questionNum=='2'">
          <Input v-model="item.e"
                 clearable></Input>
        </FormItem>
        <FormItem label="F"
                  v-if="questionNum=='2'">
          <Input v-model="item.f"
                 clearable></Input>
        </FormItem>
      </Form>
    </div>
  </div>
</template>
<script>

export default {
  props: ['questionNum', 'questionData'],
  methods: {
    del (index) {
      this.$emit('del', index)
    }
  }

}
</script>

<style lang="scss">
#choice-question {
  .title {
    display: flex;
    justify-content: space-between;
    .ivu-input {
      width: 400px;
    }
  }
  .options {
    .ivu-form-item {
      width: calc(100% / 6);
      float: left;
    }
  }
}
</style>
